function getRandomInt() {
         const randomNum = Math.random();
         console.log(randomNum);
         let randomChar;
         if (randomNum < (0.3333)) {
             randomChar = 'a';
         } else if (randomNum < (2.0 / 3)) {
             randomChar = 'b';
         } else {
             randomChar = 'c';
         }
          return randomChar;
     }
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/api/blogs')
                .then(response => {
                    if (!response.ok) throw new Error('网络响应异常');
                    return response.json();
                })
                .then(blogs => {
                    const blogList = document.querySelector('.blog-list');
                    blogList.innerHTML = ''; // 清空静态示例

                    blogs.forEach(blog => {
                        const article = document.createElement('article');
                        article.className = 'blog-card';
                        blog.image_url = "https://img1.baidu.com/it/u=633677299,2735004189&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=836"
                        console.log(blog)
                        // 格式化日期
                        const date = new Date(blog.created_at);
                        const formattedDate = date.toLocaleDateString('en-US', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                        });

                        // 生成标签HTML
                        const tagsHtml = blog.tags.map(tag =>
                            `<span class="post-tag ${ getRandomInt()}">${tag}</span>`
                        ).join('');

                        // 构建卡篇内容
                        article.innerHTML = `
                            <a href="/blog/${blog.slug}" class="card-link">
                                <img src="${blog.image_url}" alt="${blog.title}" class="blog-image">
                                <div class="blog-content">
                                    <h2 class="blog-title">${blog.title}</h2>
                                    <p class="blog-excerpt">${blog.excerpt}</p>
                                    <div class="blog-meta">
                                        <time class="post-date">${formattedDate}</time>
                                        <div class="tag-group">
                                        ${tagsHtml}
                                          
                                        </div>
                                    </div>
                                </div>
                            </a>
                        `;
                        blogList.appendChild(article);
                    });
                })
                .catch(error => {
                    console.error('加载失败:', error);
                    blogList.innerHTML = '<p>无法加载博客列表，请稍后再试。</p>';
                });
        });
